<template>
    <div>
      <!--     面包屑导航区域-->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>添加商品</el-breadcrumb-item>
      </el-breadcrumb>
      <!--  卡片区域-->
      <el-card>
<!--        提示区-->
        <el-alert :closable="false" title="添加商品信息" type="info" center show-icon></el-alert>
<!--      步骤条区域-->
        <el-steps align-center :space="200" :active="active-0" finish-status="success">
          <el-step title="基本信息"></el-step>
          <el-step title="商品参数"></el-step>
          <el-step title="商品属性"></el-step>
          <el-step title="商品参数"></el-step>
          <el-step title="商品内容"></el-step>
          <el-step title="完成"></el-step>
        </el-steps>
<!--        tab栏-->
        <el-form :model="form" :rules="rules" ref="ruleForm"
        label-width="100px"
        >
        <el-tabs @tab-click="tabClicked" :before-leave="beForeTabLeave" v-model="active" tab-position="left" >
          <el-tab-pane name="0" label="基本信息">
            <el-form-item label="商品名称" prop="goods_name">
              <el-input v-model="form.goods_name"></el-input>
            </el-form-item>
            <el-form-item label="商品价格" prop="goods_price">
              <el-input type="number" v-model="form.goods_price"></el-input>
            </el-form-item>
            <el-form-item label="商品重量" prop="goods_weight">
              <el-input type="number" v-model="form.goods_weight"></el-input>
            </el-form-item>
            <el-form-item label="商品数量" prop="goods_number">
              <el-input type="number"  v-model="form.goods_number"></el-input>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane name="1" label="商品参数">商品参数</el-tab-pane>
          <el-tab-pane name="2" label="商品属性">商品属性</el-tab-pane>
          <el-tab-pane name="3" label="商品图片">
<!--            action表示图片上传的后台地址api-->
<!--            一般是axios的根路径加上图片的api-->
<!--            on-preview为数据处理函数：意为处理图片打开时预览触发的函数-->
<!--            file-list处理文件列表-->
<!--            list-type预览组件的处理方式-->
            <el-upload
              action="https://fuss10.elemecdn.com"
              :on-preview="handlePreview"
              :headers="headerObj"
              :on-remove="handleRemove"
              :file-list="fileList"
              list-type="picture">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-tab-pane>
          <el-tab-pane name="4" label="商品内容">
            <quill-editor v-model="form.goods_introduce"></quill-editor>
            <el-button class="btn-Add" @click="add" type="primary">添加商品</el-button>
          </el-tab-pane>
        </el-tabs>
        </el-form>
      </el-card>
      <el-dialog
        title="图片浏览"
        :visible.sync="dialogVisible"
        width="50%">
        <img style="width: 100%;max-height: 400px" :src="Path">
      </el-dialog>
    </div>
</template>

<script>
// 一般用_接受
import _ from 'lodash'
export default {
  name: 'Add',
  data () {
    return {
      active: '0',
      form: {
        goods_name: '',
        goods_price: 0,
        goods_weight: 0,
        goods_number: 0,
        ll: [1, 2, 3],
        goods_introduce: ''
      },
      rules: {
        goods_name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' }
        ],
        goods_price: [
          { required: true, message: '请输入商品价格', trigger: 'blur' }
        ],
        goods_weight: [
          { required: true, message: '请输入用户重量', trigger: 'blur' }
        ],
        goods_number: [
          { required: true, message: '请输入用户数量', trigger: 'blur' }
        ]
      },
      fileList: [{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' },
        { name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }],
      headerObj: {
        // 图片上传的请求头
        Authorization: window.sessionStorage.getItem('token')
      },
      dialogVisible: false,
      Path: ''
    }
  },
  methods: {
    beForeTabLeave (activeName, oldActiveName) {
      // console.log(activeName) // 即将进入的下一页tab的name
      // console.log(oldActiveName)// 即将离开的上一页tab的name
      // return false// 表示无法进入下一页
    },
    tabClicked () {
      console.log(this.active)
    },
    handlePreview (file) {
      // 处理图片预览效果
      console.log(file)
      this.Path = file.url
      this.dialogVisible = true
    },
    handleRemove () {
      // 处理移除图片时的操作
    },
    add () {
      console.log(this.form)
      this.$refs.ruleForm.validate(
        valid => {
          if (!valid) {
            return this.$message.error('请填写完整')
          }
          // 拷贝
          // lodash cloneDeep(obj)// 可以将后面跟的obj对象那个重新拷贝出一份新的对象
          // 这样可以加快速率，因为如果我们重新赋值，就会重新生成内存，然后又进行修改
          // 这样就可以是的级联选择器的绑定数据依然是源数据，我们修改新的值
          const addForm = _.cloneDeep(this.form)
          addForm.ll = addForm.ll.join(',')
          console.log(addForm)
          console.log(this.form)
          this.$router.push('/list')
        }
      )
    }
  }
}
</script>

<style scoped>
  /deep/ .el-steps{
  margin: 15px 0;
}
  /deep/.el-step__title{
    font-size: 13px;
  }
  .btn-Add{
    margin-top:15px ;
  }
</style>
